<template>
    <div class="role">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getRoleList">
            <el-button class="btn search mL20" @click="visible.show = true">新增</el-button>
        </search-form>
        <elTable :formData="formData" @getList="getRoleList">
                <el-table-column prop="name" label="角色名" align="center"></el-table-column>
                <el-table-column prop="group" label="用户组" align="center">
                    <template slot-scope="scope">
                        {{scope.row.group.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{$normalTime(scope.row.createTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                        <el-button type="text"  @click="deleteRole(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <caSelect v-if="false"></caSelect>
        <dialogs
        :visible="visible"
        :title="`${isEditer ? '编辑' : '新增'}角色`"
        width="500px"
        @confirm="save"
        >
            <el-form v-model="formRole" label-width="100px">
                <el-form-item prop="name" label="角色名">
                    <el-input v-model.trim="formRole.name" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item prop="store" label="所属用户组">
                    <el-select v-model="formRole.group.id" style="width: 100%;" @change="selectGroup">
                        <el-option  v-for="(item, i) in groupList" :label="item.name" :value="item.id" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  class="special" label="菜单权限" v-if="formRole.group.id" >
                   <el-tree show-checkbox :data="data" :props="defaultProps" @check="nodeCheck"  node-key="id" :default-checked-keys="defaultData"></el-tree>
                </el-form-item>
            </el-form>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import caSelect from '@/components/xForm/areaSelect'
export default {
    name: 'role',
    components: {
        elTable,
        caSelect
    },
    data () {
        return {
            isEditer: false,
            formData: {
                data: [],
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            visible: {
                show: false
            },
            searchObj: {
                groupId: '',
                store: this.$storeId
            },
            searchArray: [
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '用户组',
                    key: 'groupId',
                    list: [
                    ]
                },
            ],
            formRole: {
                name: '',
                store: this.$storeId,
                group: {
                    id: ''
                },
                menuList: [],
                id: ''
            },
            groupList: [],
            data: [],
            defaultData: []
        }
    },
    created () {
        this.getRoleList()
        this.getGroupList()
    },
    methods: {
        // 获取组
        getGroupList () {
            this.$api.userManage.getUserGroupList().then(r => {
                let list = r.data && r.data  || []
                this.groupList = list
                list = list.map(rr => {
                    return {
                        label: rr.name,
                        value: rr.id
                    }
                })
                this.$set(this.searchArray[0], 'list', list )
            }).finally(() => {
            })
        },
        // 获取角色
        getRoleList (status = true) {
            if (!status) this.formData.currentPage = 1
            this.$loading(true)
            const {formData: {currentPage, pageSize}, searchObj: {groupId, store}} = this
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            if (groupId) param.groupId = groupId
            if (store) param.store = store
            this.$api.userManage.getRoleList(param).then(r => {
                let list = r.data && r.data.list  || []
                this.$set(this.formData, 'data', list)
                this.$set(this.formData, 'total', r.data.total || 0)
            }).finally(() => {
                this.$loading(false)
            })
        },
        // 获取菜单角色
        getMenuTreeList () {
            const {formRole: {store, group: {id}}} = this
            let param = {}
            param = {
                store,
                groupId: id
            }
            this.$api.system.getMenuTreeList(param).then(r => {
                let list = r.data || [], arr = []
                list.forEach(r => {
                    let item = {}
                    item.id = r.id
                    item.group = r.group || {}
                    item.label = r.name || ''
                    item.children = []
                    item.sonMenus = r.sonMenus
                    if (r.sonMenus && r.sonMenus.length) {
                        r.sonMenus.forEach(rr => {
                            item.children.push({
                                sonMenus: rr.sonMenus || [],
                                id: rr.id,
                                label: rr.name,
                                group: rr.group || {},
                                children: rr.sonMenus && rr.sonMenus.length && rr.sonMenus.map(rrr => { return {id: rrr.id, label: rrr.name}})
                            })
                        })
                    }
                    arr.push(item)
                })
                this.data = []
                this.data = arr
            })
        },
        selectGroup () {
            this.getMenuTreeList()
        },
        doChangeData (data) {
            let arr = []
            arr = data.map(r => {
                let item = {}
                item.id = r.id
                item.sonMenus = []
                if (r.sonMenus && r.sonMenus.length) {
                    item.sonMenus = r.sonMenus.map(rr => {
                        return {id: rr.id}
                    }) || []
                }
                return item
             })
             return arr
        },
        nodeCheck (checkedNodes) {
            this.formRole.menuList = this.doChangeData([checkedNodes])
        },
        deleteRole (item) {
            this.$confirm('确定要删除该角色么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$loading(true)
                    this.$api.userManage.deleteRole({id: item.id}).then(r => {
                        this.$message.success(r.msg)
                        setTimeout(() => {
                            this.getRoleList()
                        }, 1000)
                    }).finally(() => {
                        this.$loading(false)
                    })
                }).catch(() => {
                        
            })
        },
        editer (item) {
            this.$loading(true)
            this.$api.userManage.getRoleDetail({id: item.id}).then(r => {
                this.formRole = {
                    id: r.data.id,
                    menuList: r.data.menuList,
                    group: {id: r.data.group.id || ''},
                    name: r.data.name || '',
                    store: r.data.store
                }
                let list = r.data.menuList || [], ar = []
                list.forEach(i => {
                    if (i.sonMenus && i.sonMenus.length) {
                        i.sonMenus.forEach(ii => {
                            ar.push(ii.id+'')
                        })
                    }
                })
                this.getMenuTreeList()
                this.defaultData = ar
                this.isEditer = true
                this.visible.show = true
            }).finally(() => {
                this.$loading(false)
            })
        },
        save () {
            let param = {}
            const {formRole: {group, name, menuList, id}} = this
            if (name == '') {
                this.$message.error('请输入角色名称')
                return
            }
            if (!group.id) {
                this.$message.error('请选择用户组')
                return
            }
            if (menuList && menuList.length == 0) {
                this.$message.error('请选择菜单权限')
                return
            }
            param = {
                group,
                name,
                menuList,
                store: this.$storeId
            }
            this.$loading(true)
            let types = !id ? 'addRole' : 'putUpdateRole'
            if (id) param.id = id
            this.$api.userManage[types](param).then(r => {
                this.$message.success(r.message)
                this.visible.show = false
                setTimeout(() => {
                    this.getRoleList()
                })
            }).finally(() => {
                this.$loading(false)
            })
        }
    },
    watch: {
        'visible.show' (val) {
            if (!val) {
                this.formRole = {
                    name: '',
                    group: {id: ''},
                    menuList: []
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.role {
    .search-form {
        margin-bottom: 15px;
    }
    ::v-deep.special {
        height: 100px;
        .el-form-item__content {
            max-height: 100px;
            overflow-y: auto;
            padding-top: 5px;
        }
    }
}
</style>